<template>
  <div class="page-container">
    <!-- 评价报告模态框 -->
    <Evaluation
        :visible = "showEvaluationModal"
        :resumeId = "resumeId"
        @close="handleCloseModal"
    />
    <div class="content-wrapper">
      <!-- 头部状态卡片 -->
      <transition name="slide-fade" appear>
        <div class="status-card">
          <div class="status-header">
            <div class="icon-container">
              <transition name="icon-bounce" appear>
                <CheckCircle v-if="isMatched" class="status-icon status-icon--success" />
                <XCircle v-else class="status-icon status-icon--error" />
              </transition>
            </div>
          </div>
          <div class="status-content">
            <transition name="fade-up" appear>
              <div :class="['status-message', isMatched ? 'status-message--success' : 'status-message--error']">
                <span :class="['status-badge', isMatched ? 'status-badge--success' : 'status-badge--error']">
                  {{ isMatched ? '匹配度较高' : '匹配度较低' }}
                </span>
                <p class="status-text">
                  同学您好，综合您在面试中的表现，我们认为您与我们的岗位匹配度
                  <span :class="['status-highlight', isMatched ? 'status-highlight--success' : 'status-highlight--error']">
                    {{ isMatched ? '较高' : '较低' }}
                  </span>
                  ，{{ isMatched ? '邀请您参加进一步的面试' : '很遗憾本次招聘流程已终止' }}。
                </p>
                <p class="status-text">
                  您可以点击
                  <span @click="handleShowModal" class="evaluation-toggle">【全面评价】</span>
                  查看本次面试的详细报告，祝您求职顺利！
                </p>
              </div>
            </transition>
          </div>
        </div>
      </transition>

      <!-- 评价标准卡片 -->
      <transition name="slide-fade" appear>
        <div class="criteria-card">
          <div class="criteria-header">
            <transition name="fade-up" appear>
              <h2 class="criteria-title">
                <Eye class="criteria-icon" />
                评价标准
              </h2>
            </transition>
          </div>
          <div class="criteria-content">
            <div class="criteria-grid">
              <!-- 硬性门槛 -->
              <transition name="criteria-item" appear :style="{ transitionDelay: '0.1s' }">
                <div class="criteria-item">
                  <div class="criteria-box criteria-box--blue">
                    <GraduationCap class="criteria-item-icon criteria-item-icon--blue" />
                    <div class="criteria-item-content">
                      <h3 class="criteria-item-title">硬性门槛</h3>
                      <p class="criteria-item-desc">学历、专业匹配度、经验</p>
                    </div>
                  </div>
                </div>
              </transition>

              <!-- 专业技能 -->
              <transition name="criteria-item" appear :style="{ transitionDelay: '0.2s' }">
                <div class="criteria-item">
                  <div class="criteria-box criteria-box--purple">
                    <Code class="criteria-item-icon criteria-item-icon--purple" />
                    <div class="criteria-item-content">
                      <h3 class="criteria-item-title">专业技能</h3>
                      <p class="criteria-item-desc">掌握程度、技术深度、实践经验</p>
                    </div>
                  </div>
                </div>
              </transition>

              <!-- 职业素养 -->
              <transition name="criteria-item" appear :style="{ transitionDelay: '0.3s' }">
                <div class="criteria-item">
                  <div class="criteria-box criteria-box--green">
                    <Users class="criteria-item-icon criteria-item-icon--green" />
                    <div class="criteria-item-content">
                      <h3 class="criteria-item-title">职业素养</h3>
                      <p class="criteria-item-desc">沟通能力、团队合作能力、学习能力</p>
                    </div>
                  </div>
                </div>
              </transition>

              <!-- 面试表现 -->
              <transition name="criteria-item" appear :style="{ transitionDelay: '0.4s' }">
                <div class="criteria-item">
                  <div class="criteria-box criteria-box--orange">
                    <Eye class="criteria-item-icon criteria-item-icon--orange" />
                    <div class="criteria-item-content">
                      <h3 class="criteria-item-title">面试表现</h3>
                      <p class="criteria-item-desc">举止、表情、言谈、应变能力</p>
                    </div>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </transition>

      <!-- 页脚 -->
      <transition name="slide-fade" appear :style="{ transitionDelay: '0.6s' }">
        <div class="footer-card">
          <div class="footer-content">
            <div class="footer-notice">
              <Bot class="footer-icon" />
              <span>本内容由AI生成，仅供参考</span>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  CheckCircle,
  XCircle,
  GraduationCap,
  Code,
  Users,
  Eye,
  Bot
} from 'lucide-vue-next'
import Evaluation from "@/views/analysisReport/components/evaluation.vue";
import {useRoute} from "vue-router";
import {getInterviewEvaluation} from "@/http/m_api/interview";
import {ElMessage} from "element-plus";
// 这里可以根据实际情况设置匹配度
const isMatched = ref(true) // 可以改为 false 来显示不匹配的状态

const showEvaluationModal = ref(false)

const route = useRoute();
const resumeId = Number.parseInt(route.params.id as string)
// 显示模态框
const handleShowModal = () => {
  showEvaluationModal.value = true
}
// 关闭模态框
const handleCloseModal = () => {
  showEvaluationModal.value = false
}

onMounted(async() => {
  try{
    const res = await getInterviewEvaluation(resumeId)
    // console.log(res.data)
    isMatched.value = res.data.overallRating > 3.5;
    // ElMessage.success('面试评价数据获取成功')
  }
  catch (err){
  }
})
</script>

<style scoped>
/* 动画样式 */
.slide-fade-enter-active {
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-fade-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.fade-up-enter-active {
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.3s;
}

.fade-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.icon-bounce-enter-active {
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: 0.2s;
}

.icon-bounce-enter-from {
  opacity: 0;
  transform: scale(0.3) rotate(-180deg);
}

.criteria-item-enter-active {
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.criteria-item-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

/* 页面容器 */
.page-container {
  height: 90vh;
  padding: 1rem;
  margin-top: 25px;
}

@media (min-width: 768px) {
  .page-container {
    padding: 2rem;
  }
}

.content-wrapper {
  width: 55vw;
  margin: 0 auto;
}

/* 状态卡片样式 */
.status-card {
  margin-bottom: 2rem;
  border: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background-color: white;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.status-header {
  text-align: center;
  padding-bottom: 1rem;
  padding: 1.5rem;
}

.icon-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.status-icon {
  height: 4rem;
  width: 4rem;
  transition: transform 0.3s ease;
}

.status-icon:hover {
  transform: scale(1.1);
}

.status-icon--success {
  color: #10b981;
}

.status-icon--error {
  color: #ef4444;
}

.page-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
}

@media (min-width: 768px) {
  .page-title {
    font-size: 1.875rem;
  }
}

.status-content {
  padding: 1.5rem;
  padding-top: 0;
}

.status-message {
  text-align: center;
  padding: 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.status-message--success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.status-message--error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
  transition: transform 0.2s ease;
}

.status-badge:hover {
  transform: scale(1.05);
}

.status-badge--success {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge--error {
  background-color: #fee2e2;
  color: #991b1b;
}

.status-text {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #374151;
}

/* 可点击的"全面评价"样式 */
.evaluation-toggle {
  cursor: pointer;
  color: #1a73e8;
  font-weight: bold;
  position: relative;
  padding: 0 2px;
  transition: all 0.3s ease;
}

/* 悬停效果 */
.evaluation-toggle:hover {
  color: #0d5cb6;
  text-decoration: underline;
  transform: scale(1.05);
}

/* 激活状态效果 */
.evaluation-toggle.active {
  color: #0a4b9c;
  background-color: #e8f0fe;
  border-radius: 4px;
}

.status-highlight {
  font-weight: 600;
}

.status-highlight--success {
  color: #059669;
}

.status-highlight--error {
  color: #dc2626;
}

/* 评价标准卡片样式 */
.criteria-card {
  margin-bottom: 2rem;
  border: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background-color: white;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.criteria-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.criteria-header {
  padding: 1.5rem;
  padding-bottom: 1rem;
}

.criteria-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.criteria-icon {
  height: 1.5rem;
  width: 1.5rem;
  color: #3b82f6;
  transition: transform 0.3s ease;
}

.criteria-title:hover .criteria-icon {
  transform: rotate(15deg);
}

.criteria-content {
  padding: 1.5rem;
  padding-top: 0;
}

.criteria-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .criteria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.criteria-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.criteria-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid;
  transition: all 0.3s ease;
}

.criteria-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.criteria-box--blue {
  background-color: #eff6ff;
  border-color: #bfdbfe;
}

.criteria-box--purple {
  background-color: #faf5ff;
  border-color: #e9d5ff;
}

.criteria-box--green {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.criteria-box--orange {
  background-color: #fff7ed;
  border-color: #fed7aa;
}

.criteria-item-icon {
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.criteria-box:hover .criteria-item-icon {
  transform: scale(1.1) rotate(5deg);
}

.criteria-item-icon--blue {
  color: #3b82f6;
}

.criteria-item-icon--purple {
  color: #8b5cf6;
}

.criteria-item-icon--green {
  color: #10b981;
}

.criteria-item-icon--orange {
  color: #f97316;
}

.criteria-item-content {
  flex: 1;
}

.criteria-item-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 1.125rem;
}

.criteria-item-desc {
  color: #4b5563;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* 页脚样式 */
.footer-card {
  border: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background-color: #f9fafb;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.footer-card:hover {
  transform: translateY(-1px);
}

.footer-content {
  padding: 1rem 1.5rem;
}

.footer-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #6b7280;
  font-size: 0.875rem;
}

.footer-icon {
  height: 1rem;
  width: 1rem;
  transition: transform 0.3s ease;
}

.footer-notice:hover .footer-icon {
  transform: rotate(360deg);
}
</style>